<template>
  <div>
    <div class="topBtn">
      <div class="sizeBig"><span>车间</span></div>
      <div style="float: right;margin-right:20px">
        <el-button type="primary" @click="forbidden" style="height:36px;width:90px;">
          <i class="icon-jiny"></i>禁用
        </el-button>
        <el-button type="primary" @click="Enable" style="height:36px;width:90px;">
          <i class="icon-qiy"></i>启用
        </el-button>
        <el-button type="primary" @click="add">
          <i class="iconfont icon-addNew"></i> 新增
        </el-button>
        <el-button type="primary" @click="edit()" icon="el-icon-edit">修改</el-button>
        <el-button type="primary" @click="remove" icon="el-icon-delete">删除</el-button>
      </div>
    </div>
    <div class="message">
      <p class="character">
        对车间进行新增改查等常规管理操作。
        <span class="skip">查看帮助文档</span>
      </p>
    </div>
    <div class="inputcontent">
      <el-input v-model="search" placeholder="请输入内容" class="inSearch"  @keydown.native.enter="init"></el-input>
      <div class="iconSearch"></div>
    </div>
    <div class="tablesize">
      <Table :reset='reset' v-on:getId="getListId" id="out-table" v-on:changeData="changedata"></Table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,20,50,100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="TotalNum">
      </el-pagination>
    </div>
    <!-- 新增弹出框 -->
    <el-dialog title="新增数据" :visible.sync="addDialogVisible" width="600px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="formName"
        label-width="140px"
        class="demo-ruleForm"
      >
        <el-form-item label="车间名称：" prop="workShopName">
          <el-input v-model="ruleForm.workShopName" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="联系人：" prop="linkMan">
          <el-input v-model="ruleForm.linkMan" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="linkPhone">
          <el-input v-model="ruleForm.linkPhone" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible=false">关闭</el-button>
          <el-button type="primary" @click="submitForm('formName')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改弹出框 -->
    <el-dialog title="修改数据" :visible.sync="editDialogVisible" width="600px">
      <el-form
        :model="editInfo"
        :rules="rules"
        ref="editForm"
        label-width="140px"
        class="demo-ruleForm"
      >
        <el-form-item label="车间ID：" prop="workShopID">
          <el-input v-model="editInfo.workShopID" style="width:350px" disabled></el-input>
        </el-form-item>
        <el-form-item label="车间名称：" prop="workShopName">
          <el-input v-model="editInfo.workShopName" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="联系人：" prop="linkMan">
          <el-input v-model="editInfo.linkMan" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="linkPhone">
          <el-input v-model="editInfo.linkPhone" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="dialogVisible=false">关闭</el-button>
          <el-button @click="editSubmitForm('editForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getWorkshop,insertWorkshop,updateWorkshop,removeWorkshop,startOrStopWorkShop } from "@/api/workshop"
import Table from "./components/workshopTable";
import {delay} from '@/utils/autoSearch'

export default {
  name: "workshop",
  components: {
    Table
  },
  data() {
    return {
      search: "",
      input: "",     
      reset: [], //初始化數據
      currentPage: 1, //初始页
      size: 10, //每页显示多少条
      // val: 1,//页码
      TotalNum: 0,//数据总条数     
      addDialogVisible: false, //新增弹出框
      editDialogVisible:false,//修改弹出框
      checkIds: [], //勾选的id数组
      addlist: [], //勾选传过来的数据
      ruleForm: {
        workShopName: "",
        linkMan: "", 
        linkPhone: "",    
      },
      editInfo: {
        workShopID:'',
        workShopName: "", 
        linkMan: "", 
        linkPhone: "", 
      },
      rules: {
        workShopName: [
          { required: true, message: "请输入车间名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        linkMan: [
          { required: true, message: "请输入联系人", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        linkPhone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { min: 11, max: 11, message: "长度在 11个字符", trigger: "blur" }
        ],
      }
    };
  },
  watch: {
    //用来监听页面变量的改变
    //监听搜索，300ms执行一次fetchData方法（去搜索）
    search() {
      delay(() => {
        this.fetchData();
      }, 300);
    }
  },
  mounted(){
    this.init()
  },
  methods: {
    // 自动搜索的方法
    async fetchData(val){
      this.init()
    },
    handleSizeChange(size){
      this.size = size
      getWorkshop({ keyName:this.search,page:1,pageSize:this.size}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.reset = res.Result.Items;
        }
      })
    },
    handleCurrentChange(currentPage){
      this.currentPage = currentPage
      getWorkshop({ keyName:this.search,page:this.currentPage,pageSize:this.size}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.reset = res.Result.Items;
        }
      })
    },
    //请求数据
    init() {
      this.reset = []
      // let param = { keyName:this.search,page:1,pageSize:2};
      getWorkshop({ keyName:this.search,page:1,pageSize:10}).then(res => {
        if (parseInt(res.Code) === 1) {
          
          this.reset = res.Result.Items;
          this.TotalNum = res.Result.TotalNum;
        }
      });
    },  
    getListId(listId) {
      this.checkIds = listId;
    },
    // 新增
    add() {
      this.ruleForm = {};
      this.addDialogVisible = true;
    },
    submitForm(formName) {
       this.$refs[formName].validate((valid) => {
        if (valid) {
          insertWorkshop(this.ruleForm).then(res=>{
          if (res.Code === 1) {         
              this.$message({
                type: 'success',
                message: '新增成功!'
              })     
              this.init();
              this.ruleForm = {}
              this.addDialogVisible = false;
            }
          })   
        } else {
          console.log('error submit!!');
          return false;
        }
      });          
    },
    // 禁用
    forbidden() {
      if(this.addlist.length>0){
        if(this.addlist[0].IsEnable === 0){
          this.$message('已禁用')
        }else{
          let data = { workShopID:this.checkIds[0],isEnable:0}
          startOrStopWorkShop(data).then(res=>{
            if (parseInt(res.Code) === 1) {
              this.$message({
                type: 'success',
                message: '禁用成功!'
              })
              this.init()
            }
          })
        }      
      }else{
        this.$message('请勾选需要禁用的仓库数据')
      }
    },
    // 启用
    Enable() {
      if(this.addlist.length>0){
        if(this.addlist[0].IsEnable === 1){
          this.$message('已启用')
        }else{
          let data = { workShopID:this.checkIds[0],isEnable:1}
          startOrStopWorkShop(data).then(res=>{
            if (parseInt(res.Code) === 1) {
              this.$message({
                type: 'success',
                message: '启用成功!'
              })
              this.init()
            }
          })  
        }     
      }else{
        this.$message('请勾选需要启用的仓库数据')
      }
    },

    changedata(data) {
      this.addlist = data;
    },
    // 修改
    edit(index,row) {
      if (this.addlist.length !== 1) {
        this.$message('请勾选一项数据')
      }else {
        this.editDialogVisible = true;
        this.editInfo.workShopID=this.addlist[0].WorkShopID
        this.editInfo.workShopName=this.addlist[0].WorkShopName 
        this.editInfo.linkMan=this.addlist[0].LinkMan
        this.editInfo.linkPhone=this.addlist[0].LinkPhone
      }
    },
    editSubmitForm(editForm) {
      this.$refs[editForm].validate((valid) => {
        if (valid) {
          updateWorkshop(this.editInfo).then(res=>{
            if (parseInt(res.Code) === 1) {         
              this.$message({
                type: 'success',
                message: '修改成功'
              })
              this.editDialogVisible = false;
              this.init();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 删除   
    remove(){
      if(this.addlist.length>0){
        this.$confirm('此操作将永久删除选中的车间数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {  
          let data = {workShopID:this.checkIds[0]}
          removeWorkshop(data).then(res=>{
            if(parseInt(res.Code) === 1){
              this.$message({
                type: 'success',
                message: '删除成功!' 
              }) 
              this.init()   
            } 
          })            
        }) .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });     
      }else{
        this.$message('请勾选需要删除的数据')
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.sizeBig{
    font-size: 16px;
    margin-left: 20px;
}
.topBtn{
  height: 60px;
  width: 98%;
  margin: 0 auto;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  .icon-jiny{
    display: inline-block;
    width: 12px;
    height:12px;
    margin:0 3px 2px 0;
    background: url("image/jinyong.png") no-repeat;
    vertical-align: middle;
  }
  .icon-qiy{
    display: inline-block;
    width: 13px;
    height:13px;
    margin:0 3px 2px 0;
    background: url("image/qiyong.png") no-repeat;
    vertical-align: middle;
  }
}
.message {
  width: 98%;
  margin: 0 auto;
  height: 60px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  font-size: 14px;
  .character {
    margin: 20px 0 21px 20px;
    color: #999999;
    .skip {
      color: #0095ff;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.inputcontent {
  width: 98%;
  margin: 0 auto;
  height: 80px;
  position: relative;
  padding-top: 21px;
  box-sizing: border-box;
  .iconSearch {
    position: absolute;
    left: 277px;
    top: 30px;
    width: 20px;
    height: 20px;
    background-image: url("image/搜索.png");
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .inSearch {
    width: 308px;
    height: 40px;
  }
}
.tablesize {
  width: 98%;
  // height: 485px;
  margin: 0 auto;
   // border: 1px solid #eeeeee;
  #out-table{
    border: 1px solid #eeeeee;
  }
}
.block {
  text-align: right;
  margin: 40px 20px 0 0;
}
</style>

